<template>
  <div>
     <h3>发表评论--{{ id }}</h3>
     <hr>
     <textarea placeholder="请输入要BB的内容（最多吐槽120个字）" v-model="comment"></textarea>
     <mt-button type="primary" size="large" class="button" @click="postComment">发表评论</mt-button>
     <div v-for="(item,i) in newsList" :key="item.i">
       <p class="user">第{{ i+1 }}楼用户： {{ item.user_name }} 发表时间：{{ item.add_time | dateFormat }}</p>
       <p class="content">{{ item.content }}</p>
     </div>
     <mt-button type="danger" size="large" class="button" plain @click="getMore">加载更多</mt-button>     
  </div>
</template>


<script>
import { Toast } from "mint-ui";
export default {
  props: ["id"],
  data() {
    return {
      pageindex: 1,
      newsList: [],
      comment: ""
    };
  },
  created() {
    this.getcommentList();
  },
  methods: {
    //获取评论列表
    async getcommentList() {
      const { data } = await this.$http.get(
        "/api/getcomments/" + this.id + "?pageindex=" + this.pageindex
      );
      // console.log(data.message)
      if (data.status === 0) {
        this.newsList = this.newsList.concat(data.message);
      }
    },
    //加载更多
    getMore() {
      this.pageindex++;
      this.getcommentList();
    },
    //发表评论
    async postComment(){
     const { data }=await this.$http.post('/api/postcomment/'+this.id,{content:this.comment.trim()})
     if(this.comment.trim().length<=0){
       return Toast('评论内容不能为空');
     }
     if(data.status===0){
       Toast('发表评论成功');
       const newComment={user_name:'匿名用户',add_time:new Date(),content:this.comment.trim()}
       this.newsList.unshift(newComment)
       this.comment=''
     }
    }
  }
};
</script>


<style lang="scss" scoped>
h3 {
  font-size: 16px;
  font-weight: 700;
}
textarea {
  font-size: 14px;
  margin-bottom: 0;
}
.button {
  margin-bottom: 4px;
}
p {
  line-height: 35px;
  margin-bottom: 0;
}
.user {
  background-color: #ddd;
}
.content {
  text-indent: 2em;
}
</style>
